<template>
  <div class="searchproducts">
      <ul>
          <li v-for="item in goodsList" :key="item.id" @click="searchgoodsList(item.id)">
              <img :src="item.list_pic_url"  alt="">
              <div class="name">{{item.name}}</div>
              <div class="price">{{ item.retail_price | RMBformat}}</div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    props:["goodsList"],
    data(){
        return{

        }
    },
    methods:{
        searchgoodsList(id){
            this.$router.push("/productdetails?id="+id)
            setTimeout(() => {
                  this.$router.go(0)
            }, 10);
          
        }
    }
}
</script>

<style lang="scss" scoped>
.searchproducts{
    margin: 0;
    padding: 0;
    margin-bottom:3.125rem;
    background: lightgray;
}
 ul{
     padding: 0 2% .1rem;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     li{
         width: 49%;
         margin-bottom:.3rem;
         background: #fff;
         text-align: center;
         line-height: .3rem;
        .name{
             font-size: .875rem;
             display: block;
         }
        img{
            display: block;
            width: 100%;
        }
         .price{
             height: 1.875rem;
             line-height:1.875rem ;
             color: red;
         }
        
        }
 }
</style>